<template>
  <div>
    <a-card>
      <p v-if="noTitleKey === 'charge_be_pay_payRecord'">
        <component :is="record"></component>
      </p>
      <p v-if="noTitleKey === 'charge_be_pay_payStore'">
        <component :is="store"></component>
      </p>
      <p v-if="noTitleKey === 'charge_be_pay_cancelStore'">
        <component :is="cancelStore"></component>
      </p>
    </a-card>
  </div>
</template>

<script>
import charge_be_pay_payRecord from './payRecord'
import charge_be_pay_payStore from './payStore'
import charge_be_pay_cancelStore from './cancelStore'
export default {
    name: 'charge_be_pay_index',
    components: { charge_be_pay_payRecord, charge_be_pay_payStore, charge_be_pay_cancelStore },
    data() {
        return {
            noTitleKey: 'charge_be_pay_payRecord',
            record: 'charge_not_pay_index',
            store: 'charge_be_pay_payStore',
            cancelStore: 'charge_be_pay_cancelStore',
            tabs: {
                active: () => this.noTitleKey,
                callback: key => {
                    console.log(key)
                    this.noTitleKey = key
                },
                items: [
                    {
                        key: 'charge_be_pay_payRecord',
                        title: '缴费记录'
                    },
                    {
                        key: 'charge_be_pay_payStore',
                        title: '缴费明细'
                    },
                    {
                        key: 'charge_be_pay_cancelStore',
                        title: '回收站'
                    }
                ]
            }
        }
    },
    created() {
        this.record = charge_be_pay_payRecord
        this.store = charge_be_pay_payStore
        this.cancelStore = charge_be_pay_cancelStore
    },
    methods: {}
}
</script>

<style scoped>
</style>